<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-input v-model="data.idInput" placeholder="Please input" clearable />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="clickSearch">查询</el-button>
      </el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-descriptions title="产品信息" border :column="1" direction="vertical" >
          <el-descriptions-item label="产品ID" >{{ data.productInfo.productId }}</el-descriptions-item>
          <el-descriptions-item label="产品名" >{{ data.productInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="原农产品ID" >{{ data.productInfo.cropId }}</el-descriptions-item>
          <el-descriptions-item label="出厂日期" >{{ data.productInfo.time }}</el-descriptions-item>
          <el-descriptions-item label="负责人" >{{ data.productInfo.owner }}</el-descriptions-item>
          <el-descriptions-item label="质检证明" >
            <el-button type="primary" @click="checkCertification(data.productInfo)">查看</el-button>
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
      <el-col :span="6">
        <el-descriptions title="零售商信息" border :column="1" direction="vertical" >
          <el-descriptions-item label="商品ID" >{{ data.goodsInfo.goodsId }}</el-descriptions-item>
          <el-descriptions-item label="商品名" >{{ data.goodsInfo.name }}</el-descriptions-item>
          <el-descriptions-item label="原产品ID" >{{ data.goodsInfo.productId }}</el-descriptions-item>
          <el-descriptions-item label="保质期" >{{ data.goodsInfo.exp }}</el-descriptions-item>
          <el-descriptions-item label="联系方式" >{{ data.goodsInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="负责人" >{{ data.goodsInfo.owner }}</el-descriptions-item>
          <el-descriptions-item label="进货证明" >
            <el-button type="primary" @click="checkCertification(data.goodsInfo)">查看</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="12">
        <el-tabs
            v-model="data.activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClickTab"
        >
          <el-tab-pane label="原料信息" name="material">
            <el-descriptions title="原料信息" border :column="2" direction="vertical" >
              <el-descriptions-item label="原料ID" >{{ data.materialInfo.materialId }}</el-descriptions-item>
              <el-descriptions-item label="原料名称" >{{ data.materialInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="生产地址" >{{ data.materialInfo.produceAddress }}</el-descriptions-item>
              <el-descriptions-item label="负责人" >{{ data.materialInfo.owner }}</el-descriptions-item>
              <el-descriptions-item label="备注" >{{ data.materialInfo.note }}</el-descriptions-item>
              <el-descriptions-item label="质检证明" >
                <el-button type="primary" @click="checkCertification(data.materialInfo)">查看</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="农产品信息" name="second">
            <el-descriptions title="农产品信息" border :column="2" direction="vertical" >
              <el-descriptions-item label="农产品ID" >{{ data.cropInfo.cropId }}</el-descriptions-item>
              <el-descriptions-item label="农产品名" >{{ data.cropInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="原料ID" >{{ data.cropInfo.materialId }}</el-descriptions-item>
              <el-descriptions-item label="种植时间" >{{ data.cropInfo.time }}</el-descriptions-item>
              <el-descriptions-item label="种植方式" >{{ data.cropInfo.plantType }}</el-descriptions-item>
              <el-descriptions-item label="地址" >{{ data.cropInfo.produceAddress }}</el-descriptions-item>
              <el-descriptions-item label="负责人" >{{ data.cropInfo.owner }}</el-descriptions-item>
              <el-descriptions-item label="备注" >{{ data.cropInfo.note }}</el-descriptions-item>
              <el-descriptions-item label="原料进货证明" >
                <el-button type="primary" @click="checkCertification(data.cropInfo)">查看</el-button>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="种植过程" name="cropProcess"></el-tab-pane>
          <el-tab-pane label="加工过程" name="Process"></el-tab-pane>

        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog v-model="data.certificationVisible">
      <img class="certification" :src="data.certificationSrc" />
    </el-dialog>
  </div>
</template>

<script>
import {reactive} from "vue";
import {func_getCropById, func_getGoodsById, func_getMaterialById, func_getProductById} from "../../api/etherneum/api";
import {productInfoFormatter} from "../../config/glossary";
import UploadPic from "@/components/UploadPic/index";
import ipfsAPI from "ipfs-api";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
const ipfs = ipfsAPI({ host: "49.234.138.61", port: "5001", protocol: "http" });
export default {
  name: "Search",
  setup(){
    const data=reactive({
      activeName:'material',
      idInput:'',
      goodsInfo:{
      },
      productInfo:{},
      cropInfo:{},
      materialInfo:{},
      productInfoFormatter:productInfoFormatter,
      certificationVisible:false,
      certificationSrc:''
    })
    const store=useStore();
    const router=useRouter();
    const clickSearch=async ()=>{
      if (!data.idInput){
        ElMessage.error('请输入商品溯源码')
        return
      }
      data.goodsInfo=await func_getGoodsById(data.idInput)
      data.productInfo=await func_getProductById(data.goodsInfo.productId)
      data.cropInfo=await func_getCropById(data.productInfo.cropId)
      data.materialInfo=await func_getMaterialById(data.cropInfo.materialId)
    }



    const checkCertification=async (row)=>{
      let hash=row.certification
      if (!hash){
        ElMessage.error('未上传证明')
        return
      }
      data.loading=true
      console.log('certification:',row.certification)
      ipfs.get(hash, async (err, result) => {
        console.log('here')
        if (err) throw err;
        let binaryData = [];
        binaryData.push(result[0].content.buffer);
        data.certificationSrc= window.URL.createObjectURL(new Blob(binaryData))
        console.log('src=',data.certificationSrc)
        data.loading=false
      });

      data.certificationVisible=true
    }

    const handleClickTab=(tab)=>{
      if (tab.props.name=='cropProcess'){
        if (!data.cropInfo.cropId){
          ElMessage.error('无数据')
          return
        }
        store.commit("crops/UPDATE_STATE_VALUE", {
          cropId: {
            value: data.cropInfo.cropId,
            session: true
          },
        });
        let url=router.resolve({path: `/Function/cropDetail/${data.cropInfo.cropId}`})
        window.open(url.href, '_blank');
      }
      if (tab.props.name=='Process'){
        if (!data.productInfo.productId){
          ElMessage.error('无数据')
          return
        }
        store.commit("crops/UPDATE_STATE_VALUE", {
          productId: {
            value: data.productInfo.productId,
            session: true
          },
        });
        let url=router.resolve({path: `/Function/processDetail/${data.productInfo.productId}`})
        window.open(url.href, '_blank');
      }
    }

    return{
      data,
      clickSearch,

      checkCertification,
      handleClickTab
    }
  }
}
</script>

<style lang="scss" scoped>

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}


::v-deep .el-descriptions__content{
  overflow-wrap: break-word;
  word-break: break-all;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>